<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          number-key
          :options="enumCustomerType"
          v-model="params['org_class.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <select-date-cascader
            placeholder="放款时间"
            class="form-control-ml"
            v-model="pickDateLoad"
            @select="handleDateLoadChange"
          ></select-date-cascader>
        </el-form-item>
        <el-form-item>
          <select-date-cascader
            placeholder="到期时间"
            class="form-control-ml"
            v-model="pickDateLoadEnd"
            @select="handleDateLoadEndChange"
          ></select-date-cascader>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="项目状态"
          clearable
          number-key
          :options="enumStatus"
          v-model="params['load_beh_status.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="handleSelects"
          icon="el-icon-folder-checked"
          type="primary"
          class="btn-long"
        >
          批量代偿
        </el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      row-key="customer_related_id"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div class="pl-3">
        <small class="text-muted">
          (已选择
          <span class="text-info">{{ selectLen }}</span>
          个项目)
        </small>
      </div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <attach-dialog :visible.sync="attachVisible" :project-data="attachProjectData"></attach-dialog>

    <repay-apply-dialog
      :visible.sync="editVisible"
      @success="handleSuccess"
      :view-mode="false"
      :form-data="formData"
    ></repay-apply-dialog>

    <project-view-dialog
      :visible.sync="viewVisible"
      :batch-no="attachNo"
      :query-id="queryId"
    ></project-view-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  enumCustomerType,
  dataAdapter,
  enumLoanbehStatus,
  enumloanStatusStyle,
  parseCascaderDate,
} from '@/bank/views/limit/index'
import { limitNormalParams } from '@/bank/views/limit/mixins'

import AttachDialog from '@/bank/views/limit/AttachDialog'
import RepayApplyDialog from '@/bank/views/limit/repay/RepayApplyDialog'
import ProjectViewDialog from '@/bank/views/limit/ProjectViewDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'
export default {
  components: {
    AttachDialog,
    RepayApplyDialog,
    ProjectViewDialog,
    SelectDateCascader,
  },
  mixins: [limitNormalParams],
  props: {},
  data() {
    return {
      enumCustomerType,
      enumStatus: {
        1: '在保',
        3: '代偿审核中',
        5: '正常解保',
      },
      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'is_replace.neq': 1,
        'review_approval.gte': 4,
        'load_beh_status.in': '1,3,5',
        'org_class.eq': '',
      },
      order: {
        load_end_date: 'desc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        {
          attrs: {
            label: '选择',
            type: 'selection',
            align: 'center',
            width: 55,
            reserveSelection: true,
            selectable: this.onSelect,
          },
        },
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '担保(放款)金额(万元)', prop: 'warranty_amount', align: 'center' } },
        { attrs: { label: '放款日期', prop: 'loadDate', align: 'center', minWidth: '100px' } },
        { attrs: { label: '到期日期', prop: 'loadEndDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '项目状态', prop: 'postloanStatus', align: 'center' },
          process: (_, row) => ({ attrs: { class: `text-${row.postloanStatusStyle}` } }),
        },
        { attrs: { label: '解保日期', prop: 'unGuaDate', align: 'center', minWidth: '100px' } },
        {
          attrs: { label: '操作', align: 'center', width: '200px' },
          operations: [
            { name: '申请代偿', event: this.handlefinish, ifRender: row => this.onSelect(row) },
            { name: '上传', event: this.handleUpload },
            { name: '查看', event: this.handleView },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 附件上传
      attachVisible: false,
      attachProjectData: {},

      formData: [],
      editVisible: false,

      multipleSelection: [],
      viewVisible: false,
      attachNo: '',
      queryId: '',
      pickDateLoadEnd: [],
      pickDateLoad: [],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
    selectLen() {
      return this.multipleSelection.length
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    handleDateLoadEndChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_end_date.gte'] = start
      this.params['load_end_date.lte'] = end
      this.getData()
    },
    clearSelect() {
      this.multipleSelection = []
      const $tableRef = this.$refs.multipleTable.$children[0]
      $tableRef.clearSelection()
    },
    handleDateLoadChange(val = []) {
      const [start, end] = parseCascaderDate(val)
      this.params['load_date.gte'] = start
      this.params['load_date.lte'] = end
      this.getData()
    },
    handleSuccess() {
      this.$emit('success', true)
      this.clearSelect()
      this.getData()
    },
    handleSelects() {
      if (!this.multipleSelection.length) {
        return this.$message.warning('请选择批量代偿的项目')
      }
      this.formData = this.multipleSelection.map(item => {
        return { ...item }
      })
      this.editVisible = true
    },
    onSelect(row) {
      return [1, 5].includes(+row.load_beh_status) && row.bank_id === this.clientId
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handlefinish(row = {}) {
      this.formData = [{ ...row }]
      this.editVisible = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            ...this.normalParams,
            ...this.params,
          },
          this.order
        )
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item = dataAdapter(item)
      item.unGuaDate = this.$utils.dateFormat(item.un_gua_date, 'yyyy-MM-dd') || '-'
      item.postloanStatus = enumLoanbehStatus[item.load_beh_status] || ''
      item.postloanStatusStyle = enumloanStatusStyle[item.load_beh_status] || ''

      return item
    },

    handleUpload(row = {}) {
      this.attachProjectData = row
      this.attachVisible = true
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.un_gua_comps_batch_id || ''
      this.viewVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
